import React, { PureComponent } from 'react'
import {
  ListWrapper,
  ListOuter,
  ListInner,
  ListCotent,
  ListCotentTitle,
  ListCotentMain,
  ListCotentAnthor,
  ListCotentAnthorInner,
  MoreList
} from '../style'
import { connect } from 'react-redux'
import { actionCreator } from '../store'
import { Link } from 'react-router-dom'

class List extends PureComponent {
  render() {
    const { list, handleMoreListClick } = this.props;
    return (
      <ListWrapper>
        <ListOuter>
          {
            list.map((item, index) => {
              return (
                <Link className='link-text-decoration' to={ '/detail/'+index } key={item.get('id')}>
                  <ListInner>
                    <img className='list-img' src={item.get('imgUrl')} alt='' />
                    <ListCotent>
                      <ListCotentTitle>{item.get('title')}</ListCotentTitle>
                      <ListCotentMain>
                        {item.get('content')}
                      </ListCotentMain>
                      <ListCotentAnthor>
                        <ListCotentAnthorInner>
                          {item.get('author')}
                        </ListCotentAnthorInner>
                        <ListCotentAnthorInner>
                          <i className="iconfont list-icon" >&#xe7cd;</i>
                          {item.get('comments')}
                        </ListCotentAnthorInner>
                        <ListCotentAnthorInner>
                          <i className="iconfont list-icon" >&#xe65d;</i>
                          {item.get('attention')}
                        </ListCotentAnthorInner>
                      </ListCotentAnthor>
                    </ListCotent>
                  </ListInner>
                </Link>
              )
            })
          }
        </ListOuter>
        <MoreList onClick={() => { handleMoreListClick() }}>加载更多</MoreList>
      </ListWrapper>
    )
  }
}
const mapStateToProps = (state) => {
  return {
    list: state.getIn(['home', 'list'])
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    handleMoreListClick() {
      dispatch(actionCreator.getMoreList())
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(List)